<!-- 设备首页 -->
<template>
  <div class="e-home">
    <van-nav-bar left-arrow @click-left="() => $router.push({ path: '/' })" @click-right="onClickRight"
      safe-area-inset-top>
      <template #right>
        <img style="width: 30px" src="../../assets/images/扫码01.png" alt="" @click="adddevice" />
      </template>
      <template #left>
        <img style="width: 25px" src="../../assets/images/返回2.png" alt="" />
      </template>
    </van-nav-bar>
    <!-- 顶部tab -->
    <van-tabs class="tabbar" v-model="tabbar" color="#3e96e8" title-inactive-color="rgb(125,141,155)" @click="onClick">
      <van-tab name="1" :title="item.areaname" v-for="item in tabs" :key="item.id"> </van-tab>

    </van-tabs>
    <!-- 列表 -->
    <div class="list">
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item v-for="value in list" :key="value.id" @click="godetais(value.name)">
          <template #text>
            <div class="content">
              <div class="left">
                <div>{{ value.name }}</div>
                <div>{{ value.num }}个设备</div>
              </div>
              <div class="right">
                <img :src="value.url" alt="" />
              </div>
            </div>
          </template>
        </van-grid-item>


      </van-grid>
    </div>

    <div style="padding:20px;margin-top: 30px;" class="btns">
      <van-button class="btn" type="primary" @click="updatename" size="large">池塘改名</van-button>

      <van-button class="btn" type="danger" @click="del" style="margin-top:20px" size="large">删除池塘</van-button>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';
import Bus from '../../utils/bus.js'
import { areaList, areaDel, areaUpdateName } from "../../api/area";

import first from "./module/first.vue";
import second from "./module/second.vue";
import third from "./module/third.vue";
import fourth from "./module/fourth.vue";
export default {
  name: "",
  components: {
    first,
    second,
    third,
    fourth,
  },
  data() {
    return {
      tabbar: "1",
      active: "1",
      aid: 0,
      tabs: [],
      list: [
        {
          id: 1,
          name: "水质仪",
          num: 0,
          url: require("../../assets/images/shuizhiyi.png"),
        },
        {
          id: 2,
          name: "智能开关",
          num: 0,
          url: require("../../assets/images/智能开关.png"),
        },
        {
          id: 3,
          name: "摄像头",
          num: 0,
          url: require("../../assets/images/摄像头.png"),
        }
      ],
    };
  },
  methods: {
    // 跳转
    godetais(value) {

      this.$router.push({ path: "/equipment-list", query: { type: value, aid: this.aid } });
    },
    updatename() {

      this.$router.push({ path: "/editarea", query: { id: this.aid } });
    },
    gohome() {
      this.$router.replace({ path: "/home", query: {} });
    },
    adddevice() {
      console.log("ss");
      window.ReactNativeWebView.qrCode()
    },
    // 切换渔塘数据
    onClick(name, title) {
      console.log("name", name, title);

      let list = this.tabs;
      var item = "";

      for (var i = 0; i < list.length; i++) {
        if (title == list[i].areaname) {
          item = list[i];
          break;
        }
      }
      console.log("ceshi", item);
      if (item != "") {
        this.list[0].num = item.sensor_num;
        this.list[1].num = item.device_num;
        this.list[2].num = item.camera_num;
        console.log("ok", item.id);
        this.aid = item.id;

      }


      this.getarea();

    },
    // 添加设备
    onClickRight() { },
    async getarea() {
      var res = await areaList({ userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        var list = res.data;
        if (list.length > 0) {

          if (this.aid == "0") {
            this.aid = list[0].id;
          }

          let item = list[0];

          this.list[0].num = item.sensor_num;
          this.list[1].num = item.device_num;
          this.list[2].num = item.camera_num;
        }
        this.tabs = list;
      }
    },

    del() {
      var aid = this.aid;
      Dialog.confirm({
        title: '系统提示',
        message: '确认要删除吗？',
      })
        .then(async () => {

          let res = await areaDel({ id: aid });
          if (res.status == 200) {

            this.$toast(res.message);
            this.getarea();
          }

        })
        .catch(() => {
          // on cancel
        });
    }
  },
  computed: {},
  watch: {},
  created() {

    this.getarea();
  },
  mounted() {


    Bus.$on('val', (data) => {

      console.log("data", data);
      this.getarea();

    })

    var aid = this.aid;

    var that = this;
    window.qrResult = async function (data) {


      var json = JSON.parse(data);
      if (json.key == "sky") {
        var code = json.code;
        var type = json.type;
        var userid = localStorage.getItem("userid");
        var areaid = aid;
        let res = await userDeviceAdd({ code: code, type: type, userid: userid, areaid: areaid });
        if (res.status == 200) {
          that.$toast("添加成功");
          if (that.active == "1") {
            that.$refs.child1.getData();
          } else if (that.active == "2") {
            that.$refs.child2.getData();
          } else if (that.active == "3") {
            that.$refs.child3.getData();
          }

        }
      }

    }


  },
};
</script>

<style>
.van-grid-item__content {
  border-radius: 15px;
  border: none !important;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.e-home {
  width: 100%;

  .tabbar {
    width: 65%;
    position: fixed;
    top: 0;
    z-index: 9999;
    left: 100px;
  }

  .list {
    width: 95%;
    margin: 40px auto 0;

    .content-add {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: rgb(89, 89, 89);
      padding: 20px 0;

      img {
        width: 40px;
        margin-right: 15px;
      }
    }

    .content {
      width: 100%;
      height: 100%;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;

      .right img {
        width: 80px;
      }

      .left :first-child {
        font-size: 34px;
        font-weight: 500;
      }

      .left :last-child {
        color: rgb(89, 89, 89);
        margin-top: 10px;
      }
    }
  }
}
</style>
